<template>
    <div>
        <h1>A组件</h1>
        {{ showData }}
        <div v-for="(item, index) in arrList" :key="index">
            <button @click="toFather(item)">{{ item.name }}</button>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'

const arrList = [
    {
        name: '张三传值'
    },
    {
        name: '李四传值' 
    }
]
const showData = ref('')
const emit = defineEmits(['toF'])
const toFather = (payload) => {
    showData.value = payload.name
    emit('toF', payload)
}
onMounted(() => {
    toFather(arrList[0]) 
})
















// const props = defineProps({
//     toa: {
//         type: Object,
//         default: () => {}
//     }
// })
// const dataList = ref([])
// const mockApi = () => {
//     return new Promise((resolve, reject) => {
//         resolve([{ name: '张三传值' }, { name: '李四传值' }])
//     })
// }
// const getData = async () => {
//     try {
//         const res = await mockApi()
//         if (res) {
//             dataList.value = res
//             emit('toF', res[0])
//         }
//     } catch (error) {

//     }
// }
// const toFather = (payload) => {
//     emit('toF', payload)
// }
// onMounted(() => {
//     getData()
// })

</script>
<style scoped></style>